<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息盒子</title>

    <link rel="stylesheet" href="../../../layui.css?v=1">
    <style>
        .layim-msgbox {
            margin: 15px;
        }

        .layim-msgbox li {
            position: relative;
            margin-bottom: 10px;
            padding: 0 130px 10px 60px;
            padding-bottom: 10px;
            line-height: 22px;
            border-bottom: 1px dotted #e2e2e2;
        }

        .layim-msgbox .layim-msgbox-tips {
            margin: 0;
            padding: 10px 0;
            border: none;
            text-align: center;
            color: #999;
        }

        .layim-msgbox .layim-msgbox-system {
            padding: 0 10px 10px 10px;
        }

        .layim-msgbox li p span {
            padding-left: 5px;
            color: #999;
        }

        .layim-msgbox li p em {
            font-style: normal;
            color: #FF5722;
        }

        .layim-msgbox-avatar {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }

        .layim-msgbox-user {
            padding-top: 5px;
        }

        .layim-msgbox-content {
            margin-top: 3px;
        }

        .layim-msgbox .layui-btn-small {
            padding: 0 15px;
            margin-left: 0px;
        }

        .layim-msgbox-btn {
            position: absolute;
            right: 0;
            top: 12px;
            color: #999;
        }
    </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<div style="margin: 0 15px;">
    <blockquote class="layui-elem-quote">注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。
        <br>该模版文件所在目录（相对于layui.js）：/css/modules/layim/html/msgbox.html
    </blockquote>
</div>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.from){ }}
    <li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}" data-noticeid="{{item.id}}">
      <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
        <span>{{ item.time }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
    </li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html 
-->


<script src="../../../../layui.js"></script>
<script>
	var base_url = 'https://txy.sylyx.cn/Api/Api/'
	layui.use(['layim', 'flow'], function () {
		var layim = layui.layim
			, layer = layui.layer
			, laytpl = layui.laytpl
			, $ = layui.jquery
			, flow = layui.flow;

		var cache = {}; //用于临时记录请求到的数据

		//请求消息
		var renderMsg = function (page, callback) {

			//实际部署时，请将下述 getmsg.json 改为你的接口地址
			var self_user = localStorage.getItem('rong_current_user');
			$.ajax({
				url: base_url + 'sysNoticeList',
				data: {
					page: page || 1,
					self_user: self_user
				},
				dataType: 'json',
				success: function (res) {
					if (res.status != 1) {
						return layer.msg(res.msg);
					}
					//记录来源用户信息
					layui.each(res.result, function (index, item) {
						cache[item.from] = item.user;
					});

					callback && callback(res.result, res.pages);
				}
			});
		};

		//消息信息流
		flow.load({
			elem: '#LAY_view' //流加载容器
			, isAuto: false
			, end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
			, done: function (page, next) { //加载下一页
				renderMsg(page, function (data, pages) {
					var html = laytpl(LAY_tpl.value).render({
						data: data
						, page: page
					});
					next(html, page < pages);
				});
			}
		});

		//打开页面即把消息标记为已读
      /*
       $.post('/message/read', {
       type: 1
       });
       */

		//操作
		var active = {
			//同意
			agree: function (othis) {
				var li = othis.parents('li')
					, uid = li.data('uid')
					, noticeid = li.data('noticeid')
					, from_group = li.data('fromGroup')
					, user = cache[uid];

				//选择分组
				parent.layui.layim.setFriendGroup({
					type: 'friend'
					, username: user.username
					, avatar: user.avatar
					, group: parent.layui.layim.cache().friend //获取好友分组数据
					, submit: function (group, index) {

						//将好友追加到主面板
						//parent.layui.layim.addList({
						//	type: 'friend'
						//	, avatar: user.avatar //好友头像
						//	, username: user.username //好友昵称
						//	, groupid: group //所在的分组id
						//	, id: uid //好友ID
						//	, sign: user.sign //好友签名
						//});
						//parent.layer.close(index);
						//othis.parent().html('已同意');

						//实际部署时，请开启下述注释，并改成你的接口地址

						$.ajax({
							url: base_url + 'agreeOrRefuse',
							type: 'post',
							data: {
								noticeid: noticeid,
								type: 'agree',
								uid: uid //对方用户ID
								, from_group: from_group //对方设定的好友分组
								, group: group //我设定的好友分组
							},
							dataType: 'json',
							success: function (res) {
								if (res.status != 1) {
									return layer.msg(res.msg);
								}

								//将好友追加到主面板
								parent.layui.layim.addList({
									type: 'friend'
									, avatar: user.avatar //好友头像
									, username: user.username //好友昵称
									, groupid: group //所在的分组id
									, id: uid //好友ID
									, sign: user.sign //好友签名
								});
								parent.layer.close(index);
								othis.parent().html('已同意');
							}
						});

					}
				});
			}

			//拒绝
			, refuse: function (othis) {
				var li = othis.parents('li')
					, uid = li.data('uid'),
					noticeid = li.data('noticeid');

				layer.confirm('确定拒绝吗？', function (index) {
					$.ajax({
						url: base_url + 'agreeOrRefuse',
						type: 'post',
						data: {
							noticeid: noticeid,
							type: 'refuse',
							uid: uid //对方用户ID
						},
						dataType: 'json',
						success: function (res) {
							if (res.code != 1) {
								return layer.msg(res.msg);
							}
							layer.close(index);
							othis.parent().html('<em>已拒绝</em>');
						}
					});
				});
			}
		};

		$('body').on('click', '.layui-btn', function () {
			var othis = $(this), type = othis.data('type');
			active[type] ? active[type].call(this, othis) : '';
		});
	});
</script>
</body>
</html>
